<template>
  <div class="box">
    <el-container class="isbox">
      <el-header>
        <el-row>
          <el-col :span="4"
            ><div class="grid-content bg-purple-dark">
              <span class="spanx">目录名称:</span>
              <el-input
                v-model="input"
              ></el-input></div
          ></el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple-dark">
              <span class="spanx">状态:</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option value="启用"> </el-option>
                <el-option value="禁用"> </el-option>
              </el-select></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple-light">
              <el-button class="btn2" @click="clear">清空</el-button>
              <el-button class="btn2" type="primary" @click="seach"
                >搜索</el-button
              >
            </div></el-col
          >
          <el-col :span="10"
            ><div class="grid-content bg-purple contents">
              <span class="spanx spanxx" v-if="$route.query.id ? true : false" @click="$router.back()">
                {{ msg }}
              </span>

              <el-button type="success" class="btn" @click="addUser('add', 1)"
                ><i class="el-icon-edit"></i>新增目录</el-button
              >
            </div></el-col
          >
        </el-row>
      </el-header>
      <el-main>
        <el-alert
    :title="'共'+`${counts}`+'条记录'"
    type="info"
    show-icon>
  </el-alert>
        <el-table
          :data="tableData"
          style="width: 100%"
          align="center"
          :header-cell-style="{
            background: '#fafafa',
            color: '#000000'
          }"
        >
          <el-table-column prop="id" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column
            prop="subjectName"
            label="所属学科"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="directoryName"
            label="目录名称"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="username"
            label="创建者"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="创建日期"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="totals"
            label="面试题数量"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="state" label="状态" align="center" width="200">
            <template slot-scope="scope">
              {{ scope.row.state === 1 ? '已禁用' : '已启用' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template #default="{ row }">
              <el-button
                type="text"
                @click="classification(row)"
                v-if="row.state"
                >启用</el-button
              >
              <el-button type="text" @click="label(row)" v-else>禁用</el-button>
              <!-- 修改按钮 -->
              <el-button
                type="text"
                @click="addUser('modify', row)"
                :disabled="!Boolean(row.state)"
                >修改</el-button
              >
              <!-- 删除按钮 -->
              <el-button
                type="text"
                @click="delBtn(row)"
                :disabled="!Boolean(row.state)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer
        ><div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout=" sizes, prev, pager, next, jumper"
            :total="40"
            background
          >
          </el-pagination></div
      ></el-footer>
    </el-container>
    <el-dialog :title="mytext" :visible.sync="dialogFormVisible">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="所属学科" prop=" subjectID">
          <el-select
            v-model="ruleForm.subjectID"
            placeholder="请选择"
            class="inp"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input
            v-model="ruleForm.directoryName"
            class="inp"
            placeholder="请输入目录名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  add,
  remove,
  update,
  changeState
} from '@/api/hmmm/directorys.js'
import { simple } from '@/api/hmmm/subjects.js'
export default {
  data () {
    return {
      input: '',
      value: '',
      msg: '<-返回学科',
      currentPage4: 1,
      mytext: '新增学科',
      current: 1,
      counts: '',
      pageSize: 10,
      subjectList: [],
      tableData: [
        {
          addDate: '2023-06-05 07:51:19',
          creatorID: 2,
          directoryName: 'nimasile16431314',
          id: 304,
          state: 0,
          subjectID: 264,
          subjectName: '11',
          totals: 2,
          username: '超级管理员'
        }
      ],
      formLabelWidth: '120px',
      dialogTableVisible: false,
      dialogFormVisible: false,
      // 表单验证规则
      rules: {
        subjectID: [
          { required: true, message: '请选择学科名称', trigger: 'change' }
        ],
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      ruleForm: {
        id: null,
        subjectID: '',
        directoryName: ''
      },
      data: {
        state: '',
        page: '1',
        pagesize: '10',
        username: ''
      },
      drawerType: ''
    }
  },
  // 用户列表
  async created () {
    this.initData()
    const { data } = await simple()
    this.subjectList = data
    // console.log(this.$route.query.id)
  },

  methods: {
    // 页面大小
    async handleSizeChange (val) {
      this.data.pagesize = val
      const { data } = await list(this.data)
      console.log(data)
      this.tableData = [...data.items]
      console.log(`页大小: ${val}`)
    },
    // 当前页面
    async handleCurrentChange (val) {
      this.data.page = val
      const { data } = await list(this.data)
      console.log(data)
      this.tableData = data.items
      console.log(`当前页: ${val}`)
    },
    // 确定按钮
    submitForm (formName) {
      this.$refs[formName].validate(async valid => {
        // 验证通过时执行下面的代码
        if (valid) {
          if (this.drawerType === 'modify') {
            const str = await update(this.ruleForm)
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            console.log(str)
            this.initData()
          } else {
            const res = await add(this.ruleForm)
            console.log(res)
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          }
          this.dialogFormVisible = false
        } else {
          this.$message.error('请输入必填项')
          return false
        }
      })
    },
    // 删除按钮
    delBtn (data) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await remove(data)
          if (res.status === 200) {
            this.initData()
          }
          console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async addUser (type, id) {
      this.drawerType = type
      if (type === 'modify') {
        this.mytext = '修改学科'
        this.ruleForm.id = id.id
        this.ruleForm.subjectID = id.subjectID
        this.ruleForm.directoryName = id.directoryName
      } else {
        this.mytext = '新增学科'
      }
      this.dialogFormVisible = true
    },
    async initData () {
      const { data } = await list({
        current: this.current,
        pageSize: this.pageSize,
        directoryName: this.input,
        state: this.value === '启用' ? 1 : 0
      })
      data.items.forEach(ele => {
        ele.addDate =
          ele.addDate.substring(0, 10) + ' ' + ele.addDate.substring(11, 19)
      })
      this.tableData = data.items
      this.counts = data.counts
      // console.log(data)
    },
    async classification (id) {
      id.state = 0
      await changeState({ id: id.id, state: id.state })
      this.$message({
        type: 'success',
        message: '操作成功!'
      })
      // this.initData()
    },
    async label (id) {
      id.state = 1
      await changeState({ id: id.id, state: id.state })
      this.$message({
        type: 'success',
        message: '操作成功!'
      })
      // this.initData()
    },
    seach () {
      this.initData()
    },
    clear () {
      this.input = ''
      this.value = ''
      this.initData()
    }
  },
  watch: {
    dialogFormVisible () {
      if (!this.dialogFormVisible) {
        // this.$refs.ruleForm.resetFields()
        this.ruleForm = {
          username: '',
          email: '',
          password: '',
          role: '',
          permission_group_id: '',
          phone: '',
          introduction: ''
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.el-header,
.el-footer {
  background-color: #fff;
  color: #333;
  text-align: center;
}

.grid-content {
  display: flex;
  align-items: center;
  padding-left: 20px;
  height: 60px;
}
.contents {
  float: right;
}
.btn {
  width: 100px;
  padding: 10px 12px;
}
.record {
  width: 100%;
  height: 30px;
  background-color: #f4f4f5;
  line-height: 30px;
  border-radius: 2px;
  margin-bottom: 20px;
}
span {
  display: inline-block;
  height: 32px;
}
.block {
  display: flex;
  justify-content: flex-end;
}
.el-pagination {
  padding: 17px 10px;
  height: 60px;
}
// .has-gutter {
  // background-color: #e8e8e8;
// }
.inp {
  width: 280px;
}
.dialog-footer {
  display: flex;
  margin-left: 100px;
}
.spanx {
  // margin-right: 20px;
  width: 120px;
  line-height: 35px;
}
.spanxx {
  color: #0097f6;
}
/deep/ .el-dialog {
  width: 420px;
}
</style>
